<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="js/zepto.min.js"></script>
  <script src="js/touch.js"></script>
  <title>touch</title>
</head>

<style>
  .content1,
  .content2,
  .content3 {
    width: 100px;
    height: 100px;
    background-color: #0f0;
    margin-bottom: 20px;
  }
</style>

<body>
  <div class='content1'>zepto入门学习1
  </div>
  <div class='content2'>zepto入门学习2
  </div>
  <div class='content3'>zepto入门学习3
  </div>
</body>
<script>
  // $('.content1').on('tap', function () {
  //   alert('tap触发事件')
  // })
  // tap 点击事件
  $('.content1').tap(function () {
    alert('tap触发事件')
  })
  // singleTap
  $('.content2').singleTap(function () {
    alert('singleTap单击事件')
  })
  // doubleTap
  $('.content2').doubleTap(function () {
    alert('doubleTap双击事件')
  })
  //longTap  750ms  
  // jquery  touchStart touchEnd 时间差 ==750S
  $('.content3').longTap(function () {
    alert('longTap长按事件')
  })
  //swipe
  //swipeLeft, swipeRight, swipeUp, swipeDown
</script>

</html>